<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <<div id="container"> <div id="topbar"> <div class="fixedwidth"> <div id="bbclogo"> <img src="logos/bbclogo.png"></div> <div id="signin"> <img src="logos/singin.png"/> Sign in </div> <div class="topmenu"> <ul > <li class="liborder">News</li> <li class="liborder">Sport</li> <li class="liborder" >Weather</li> <li class="liborder">iPlayer</li> <li class="liborder">TV</li> <li class="liborder">Radio</li> <li class="liborder">More... </li> </ul> </div> <div id="searchdiv"> <input type="text" placeholder="search" /> </div> </div> <div class="break"></div> </div> <div id="newsbar"> <div class="fixedwidth"> <div id="newsheader"> <p>NEWS<span>maroc</span></p> </div> <div id="rss"> <span class="rss2">Rss</span> <img src="logos/rss.PNG"/> </div> <div class="break"></div> <div class="topicmenu"> <ul> <li class="il">Home</li> <li class="il">Video</li> <li class="il">World</li> <li class="selected">UK</li> <li class="il">Business</li> <li class="il">Tech</li> <li class="il">Science</li> <li class="il">Magazine</li> <li class="il">Entertainment & Arts</li> <li class="il">Health</li> <li class="il">World News TV</li> <li style="border-right:none" class="il">more</li> </ul> </div> </div> </div>

body{ margin:0; font-family:sans-serif; } #topbar{ background-color: #7A0000; width: 100%; height:42px; color: white; margin:0; } #container{ margin: 0; padding: 0; } .fixedwidth{ width:1050px; margin: 0 auto; padding: 0; } #bbclogo{ padding-top: 8px; float: left; border-right: 1px solid #990000; padding-right: 10px; height: 46; position: relative; } #signin{ font-weight:bold; font-size: 0.9em; padding-top:7px; float: left; border-right: 1px solid #990000; padding-right: 80px; height: 30px; padding-left:15px; } #signin img{ position: relative; top:4px; } .topmenu ul { margin:0; padding: 0; height: 8px; } #topmenu{ float: left; height: 100%; } li.liborder:hover { border-bottom: 3px solid yellow; } .topmenu li { list-style: none; font-size: 1em; padding: 10px 20px 0 20px; border-right: 1px solid #990000; float: left; } #searchdiv{ float: left; padding: 7px 0 0 10px; } #searchdiv input{ height: 25px; border:none; font-size:0.9em; background:url(logos/searchlogo.PNG); background-repeat: no-repeat; background-position: right center; } .break{ clear: both; } #newsbar{ background-color: #990000; width: 100%; height:96px; color: white; margin: 0; } #newsheader p{ margin: 0; font-size:2.3em; padding-top: 30px; float: left; } #newsheader span{ padding-left: 10px; font-size: 0.6em; } #rss{ float: right; font-size: 1.3em; padding-top:50px; margin: 0; } #rss img{ height: 13px; margin: 0; } span.rss2:hover{ border-bottom: 2px solid yellow; margin: 0; } .topicmenu{ margin: 0; padding: 0; } .topicmenu ul{ margin: 0; padding: 0; background-color: #3E0C0D; height: 21px; } .topicmenu li{ list-style: none; font-size: 0.9em; padding: 2px 10px 0 10px; border-right: 1px solid #990000; float: left; margin: 0; /*margin-top: 2px;*/ } li.il:hover{ border-bottom: 2px solid yellow; } li.selected:hover{ text-decoration: underline; } /*important !!!!!!!!!!!!!!!!!!!!*/ .selected{ background-color: #FFFFFF; color: black; position: relative; padding-top:6px !important; }