Putting <ul><li> horizontally beside a text in a <div>

I've spent about 10 minutes looking at this but ultimately realised I'm not really sure what you want. Perhaps you could explain which text the links should go to the left of (eg I would assume it is the text  "This is a cultural website" but that's not in your fiddle) and update your jsfiddle to include the text. If that is what you want, see what happens when you add width:50% to the #nav style.

Also you say "each link change its color when mouse hover and appear as underline.". It's not clear what you mean by that either. Are you asking for css to achieve that?

Sorry if my explanation was not enough, i want a horizontal menu bar  beside the text  "This is a cultural website" (text color of menu bar #fff and with mouse over the link have underline).

Did you try adding the style I suggested? Is that the kind of thing you want?

Terry, i thought that the link in http://jsfiddle.net/ has been save but its save dose not work,please test my HTML  and CSS in it and see the result,it needs styling for horizontal menu that be beside the "This is a cultural website" these are the codes:

HTML

   <div class="header-date-generallinks">
   <div class="date">
   </div>
   <div class="generallinks">
   This is a cultural website
    <ul class="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">CAPABILITIES</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">RFQ</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
 
   </div>
   </div>
 

Select allOpen in new window

CSS

.header-date-generallinks{
	height:40px;
    width: 100%;
    background-color: #bb0700;
	}
  	 .generallinks{
	 float:right;
	 color:#fff;
	font-family:Tahoma;
	font-size:16px;
	direction:rtl;
	padding-right:80px;
	height:40px;
	line-height: 40px;
	text-align: center;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: 
     border-box; box-sizing: border-box;
	 
	 }

   	.nav {
text-align:center;
font-size:9px;
 
}
.nav li {
display:inline;

}
.nav a {
text-decoration:none; 
padding:0 10px; /* variable width */
}

Select allOpen in new window

Are you able to edit the HTML too? Currently your text is inside a div with class generallinks and the nav is in the same div. It would help if the text was at least wrapped in div tags. Fiddle with your given code: https://jsfiddle.net/bxou3fpo/1/ (no solution yet, but this may at least help other experts solve it if they look at it too)

Yes,this is what i want,but i want that adjust these parameter:

-Padding(the distance from right) of the text.

-Margin of navbar in left of text.

-Color , font size and distance between links of navbar.

-When we hover on navbar then we have underline for links.