I have been trying to figure out how to fix this drop-down menu. It seems to look okay until I hover and the menu appears horizontal instead of vertical. Is it something wrong with the css?
Thanks for your help!
JS Fiddle
HTML
<body>
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav"><img src="../images/Website/banner.jpg" width="1280" height="120">
<ul style="list-style: none;">
<li>Home</li>
<li>Research</li>
<li>Susan Taylor</li>
<li>Lab Members
<ul>
<li>Current Members</li>
<li>Former Members</li>
<li>Gallery</li>
</ul>
</li>
<li>Publications</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</nav>
<br>
</br>
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner"> <!-- TemplateBeginEditable name="EditRegion3" -- >EditRegion3<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<footer class="footer" id="footer">
<div align="center">
<p>Taylor Laboratory<br>
Leichtag Biomedical Research Building
4th Floor, Room 412
<br>
University of California, San Diego
<br>
9500 Gilman Dr. mc0654<br>
La Jolla, CA 92093
<br>
Ph: (858) 534-8190
<br>
Fax: (858) 534-8193 </p>
</div>
</footer>
</div>
</body>
CSS
li ul{
display:none;
}
li:hover ul{
display:block;
}
body {
margin: 0px;
background-color: #CCCCCC;
}
.content {
background-color: #FFFFFF;
padding-right: 6px;
padding-left: 6px;
}
.footer {
background-color: #357f7f;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
color: #FFFFFF;
position: absolute;
}
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1280px;
min height: 100%;
position: relative;
height: auto;
min-height: 100%
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#content-spacer-top {
height: 10px;
}
#content-spacer-bottom{
height:1%;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
float: left;
text-align: center;
width: 14.28%;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
display: block;
list-style-type: none;
clear: none;
margin: 0px;
height: 2%;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #357F7F;
border-right-color: #357F7F;
border-bottom-color: #357F7F;
border-left-color: #357F7F;
}
#mainnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
.style2 {
font-size: small;
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
.style4 {font-size: x-small}
.style5 {background-color: #357f7f; font-family: arial;}
#footer {
width:1280px;
height:120px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}
Alright, so after having a look at your updated fiddle I was able to see the problem straight away. Firstly your code is really messy (sorry, but it is haha) and you have so many unnecessary css declarations.
It was so badly written I have just written a brand new fiddle and included a working navigation bar. Find the relevant code below.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Research</li>
<li>Susan Taylor</li>
<li>Lab Members
<ul>
<li>Current Members</li>
<li>Former Members</li>
<li>Gallery</li>
</ul>
</li>
<li>Publications</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
nav {
display: table;
border-top: 1px solid #357F7F;
border-bottom: 1px solid #357F7F;
}
nav ul {
display: table-row;
position: relative;
margin: 0;
padding: 0;
z-index: 1;
}
nav ul a {
display: block;
color: black;
text-decoration: none;
padding: 10px 15px;
font-family: Arial, Helvetica, sans-serif;
}
nav ul li {
position: relative;
display: inline-block;
display: table-cell;
width: 1%;
list-style-type: none;
text-align: center;
}
nav ul li:hover {
background-color: #357F7F;
}
nav ul li:hover a {
color: white;
}
nav ul ul{
display: none;
position: absolute;
background: rgba(0,0,0,0.4);
width: 100%;
}
nav ul ul li {
width: 100%;
display: inline-block;
}
nav ul li:hover > ul {
display: block;
}
JSFiddle
Hope this helps! :)
Related
I'm having problems with my navbar. The process of making one is already done, but when I hover over my nav and my subnav appears, all the text below it moves down.
How do I fix this?
Here is a code snippet which demonstrates the problem, hover over TAKKEN to see the issue:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text below the nav.
Image showing the problem
Try giving a fixed width to the li elements.
Check this:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal > li {
float: left;
width: 6rem;
}
.horizontal li ul{
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a{
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color:#FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
There appear to be 2 style-related problems with your nav.
Elements are being shifted to the side when you hover over TAKKEN.
This is happening because the text KAPOENEN and KAWELLEN is longer and therefore wider than TAKKEN. The quickest fix would be to define a specific width for each of the items in your nav.
Any text below the nav moves down as soon as one of the subnavs open.
To solve this problem, you need to give your nav an absolute position, and add a placeholder div to just above it in your HTML.
Run the code snippet below to see a demonstration of both points. I've marked all my changes in the CSS using comments.
/* New code */
#placeholder {
height: 100px;
}
nav {
position: absolute;
top: 5px;
}
/* End new code */
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
/* New code */
width: 80px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<div id="placeholder"></div>
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text under the nav.
I'm trying to align the dropdown menu when I hover over get started, but it doesn't work.
I tried adding the code left:auto; right:0; margin-right:-10px; to my CSS (as you'll see below) but it did nothing.
How do I fix this or add another code to make my menu aligned?
Is there a certain CSS trick to solve this?
nav ul {
background: url(transparent.png);
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
margin: 10px 0 0 10px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
left: auto;
right: 0;
margin-right: -10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
You should go with this:
left: 50%;
transform: translateX(-50%);
also, take a look at my comments in your CSS
nav ul {
background: transparent;
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #DDD;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
/*
margin: 10px 0 0 10px;
Use Equal margins: */
margin: 5px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
/* important: */
position: relative;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* Position */
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
For nav ul li a
I set this margin: 10px 0 0 0px;
This would align the "Get Started" header with the drop down values Aligned Dropdown Img
Is this how you wanted ?
nav ul {
background: url(transparent.png);
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
position:relative
}
nav ul li >a {margin: 10px 0 0 10px;}
nav ul li a {
text-decoration: none;
color: #000;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li:hover a{
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: 10px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
left: auto;
right: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
For some reason I cannot get the right menu to float right this is a horizontal div menu. the image and the left links are perfect.. the right just doesn't work, the are both in a single div.
I would like it to look like
logo--- link---link--link--link-----------------------------Date & Time
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
float: right;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
You need to float your block level elements, otherwise they will still take up 100% width. So float #left and #right.
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
padding-top: 9px;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
#left {
float: left;
}
#right {
float: right;
}
#menu li {
display: inline-block;
}
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
I would suggest you check out flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can get a real good understanding from https://css-tricks.com/all-about-floats/. Give it a read .. :D
/* align all direct child of menu, in same horizontal .... */
#menu > * {
display: inline-block;
color: #fff;
}
/* float the right component to right, and add a margin to top to bring all to same level */
#right {
margin-top: 10px;
overflow: hidden;
float: right;
}
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
margin-top: 50px;
}
#menu > * {
display: inline-block;
color: #fff;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right {
margin-top: 10px;
overflow: hidden;
float: right;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="menu">
<a href="">
<img src="logo.svg">
</a>
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
Working Fiddle
Here is a simple hack. What I have done is added your right div inside left div, and it has done the trick.
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<div id="right">
<ul>
<li style="color:white">Date & Time</li>
</ul>
</div>
</ul>
</div>
</div>
CSS
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
float: right;
margin-top:10px;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
I want to achieve this:
I have achieved this:
Why are the margins set on #members-content-box not working correctly? The page is live at http://goo.gl/e7yiAf
<section id="members-content">
<div id="members-menu">
<ul>
<li>My Items</li>
<li>Submit Items</li>
<li>Account Settings</li>
</ul>
<div id="menu-line">
</div>
</div>
<div id="members-content-box">
hello
<br /><br /><br />
</div>
</section>
My CSS:
/* members menu*/
#members-content { width: 100%; margin: 0 auto;}
#members-menu { width: 100%; text-align: left; margin-bottom: 30px;}
#members-menu ul { list-style: none;}
#members-menu li { background-color: #FFF; width: 127px; height: 25px; text-align: center; float: left; margin-right: 7px; padding-top: 8px}
#members-menu li a { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: normal; color: #2e2e2e; text-decoration: none;}
#members-menu li a:hover { color: #ffbe00;}
#members-menu li a:active { color: #ffbe00;}
#menu-line { height: 5px; background-color: #FFF; float:left; min-width: 100%; margin-left:0 40px 0 40px;}
/* members-content-box */
#members-content-box { background-color:#FFF; padding: 35px; float: left; width:100%; border: 1px solid grey;}
Use margin instead of padding - padding will just enlarge the div from inside including its background
#members-content-box { background-color:#FFF; margin: 35px; float: left; width:100%; border: 1px solid grey;}
To Achieve the above one put the padding-bottom for members-menu ul
#members-menu{
padding-bottom:30px;
}
And change members-content-box css like this
#members-content-box {
background-color: #FFF;
padding: 35px;
float: left;
width: 90%;
border: 1px solid grey;
margin-left:30px;
}
I think this one helpful to you.
I was just wounding how to get the navigation menu to cover the full width of the div because I cannot seem to do so help would be much appreciated
Here is the jsfiddle example: http://jsfiddle.net/PJ6FR/
Thanks
<html>
<style>
* {
margin: 0px;
padding: 0px;
}
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 9pt;
}
ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
margin-right: 0px;
float: left;
}
#navmenu ul {
display: inline-block;
list-style-type: none;
}
#page1 {text-align: center;}
ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 30px;
line-height: 25px;
background-color: #2E2E2E;
border: 1px solid #777777;
border-top: 2px solid #777777;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-face: Arial;
float: left;
text-align: center;
}
ul#navmenu .sub1 a {
margin-top: 0px;
}
ul#navmenu .sub2 a {
margin-left: 0px;
}
ul#navmenu li:hover > a {
background-color: grey;
}
ul#navmenu li:hover a:hover {
background-color: red;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 30px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 126px;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display: block;
}
.darrow {
font-size: 8pt;
position: absolute;
top: 8px;
right: 1px;
}
#navmenu {
display: inline-block;
text-align: center;
list-style-type: none;
margin: 0px auto;
padding: 0px;
position: relative;
border: 2px solid green;
}
.rarrow {
font-size: 8pt;
position: absolute;
top: 6px;
right: 0px;
}
#page1 .link1{
color: grey;
border-top: 2px solid red;
}
#page2 .link2{
color: grey;
border-top: 2px solid red;
}
#page3 .link3{
color: grey;
border-top: 2px solid red;
}
.container{
width: 100%;
min-width: 1024px;
max-width: 1440px;
height: 1000px;
margin: 0px auto;
}
#box2{
height: 1000px;
width: 100%;
background-color: yellow;
float: left;
margin: 0px auto;
}
#boxinbox1 {
width: 100%;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div id="box2">
<div id="page1"><div id="boxinbox1">weiuhgqiogq</div>
<ul id="navmenu">
<li>Home</li>
<li>hyperlink 2<font color="white">
<span class="darrow">▼</font></span>
<ul class="sub1">
<li>hyperlink 2.1</li>
<li>hyperlink 2.2</li>
<li>hyperlink 2.3</li>
</ul>
</li>
<li>hyperlink 3</li>
<li>hyperlink 4<span class="darrow"><font color="white">▼
</font></span>
<ul class="sub1">
<li>hyperlink 4.1</li>
<li>hyperlink 4.2</li>
<li>hyperlink 4.3<span class="rarrow">
<font color="white">▶</font></span>
<ul class="sub2">
<li>hyperlink 4.3.1</li>
<li>hyperlink 4.3.2</li>
<li>
hyperlink 4.3.3</li>
</ul>
</li>
</ul>
</li>
<li>hyperlink 5</li>
</ul></div></div>
</div>
</body>
</html>
Just add this:
ul#navmenu{
width:100% !important;
}
Demo
Add this :
#navmenu {
width:100%;
display:inline-block;
}
#navmenu li {
width:20%!important;
}
#navmenu a {
width:100%!important;
display:inline-block;
}
DEMO
Other solution will work but you will have to adjust width each time you add or remove an item...
Here is the css i have added:
#navmenu{
width: 100%;
display:table;
}
ul#navmenu > li{
display:table-cell;
float: none;
}
ul#navmenu > li li{
width: 100%;
}
#navmenu li .navmenu__wrap{
position:relative;
width: 100%;
}
#navmenu li a{
width: 100%;
}
Also added an extra div to wrap all the element inside li width this class navmenu__wrap to keep position relative.