5 Replies - 734 Views - Last Post: 10 November 2015 - 02:39 PM

#1 Sylar.   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 10-November 15

drop down menu

Posted 10 November 2015 - 01:59 PM

Hi,
I am really new to HTML and CSS and probably will suck at explaining this, so im sorry in advance. I created a drop down menu using HTML and have styled it with CSS. The problem im having, is when you hover over the menu option that then has the drop down menu show up, the drop down menu is the width of the entire navigation bar. I only want it to be the width of the item its dropping down from. I also want it to be a set width. I keep trying different things and it changes it from either being the width of the entire navigation bar, or each drop down menu item is its own width depending on how much text is in the bar. I have been looking at this day after day and am not getting anywhere. I dont know all the things Ive tried, white-space, width....I thought setting the width to inherit would do the trick, but thats what makes it the width of the entire navigation bar. Any advice? Here is my HTML and CSS

<header id="banner">
    <nav>
      <ul>
        <li><a href="index.php">Home</a></li>
        <li>
			<a href="who-we-are.php">About Us</a>
			<ul>
			    <li><a href="what-we-do.php">What We Do</a></li>
				<li><a href="agriculture.php">Agriculture/Livestock</a></li>
				<li><a href="heavy-equipment.php">Heavy Equiptment</a></li>
				<li><a href="viable-ventures.php">Viable Ventures</a></li>
				<li><a href="board-and-structure.php">Board &amp; Structure</a></li>
				
			</ul>
		</li>
		<li><a href="our-partners.php">Our Partners</a></li>
		<li><a href="slide-show.php">We are IBC</a></li>
		<li class="active"><a href="apply.php">Apply Online</a></li>
        <li><a href="news.php">News</a></li>
        <li>
		    <a href="contact.php">Contact Us</a>
			<ul>
			    <li><a href="contact-staff.php">Staff Contact</a></li>
				</ul>
		
      </ul>
    </nav>
  </header>




and CSS
}
/* drop-down menus on nav bar */


#banner li:hover ul {
    display: block; /* Displays the drop-down box when the menu item is hovered over */
	z-index: 99;
	font-size: 80%;
	position: absolute;
	
	
	
}
#banner ul ul {
    width:960px; 
	position: absolute; 
	display:none;
	
	
	
}
#banner li ul li {
    clear: both;
	background-color: #4A2500;
	width:inherit;
	
	
	
}	
#banner li ul li a:hover	{
	background-color: #c60;

}



Is This A Good Question/Topic? 0
  • +

Replies To: drop down menu

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,341
  • Joined: 12-December 12

Re: drop down menu

Posted 10 November 2015 - 02:23 PM

#banner ul ul {
    /*width:960px;*/

You have specified the width of the inner ul's as 960px.
Was This Post Helpful? 0
  • +
  • -

#3 Sylar.   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 10-November 15

Re: drop down menu

Posted 10 November 2015 - 02:30 PM

View Postandrewsw, on 10 November 2015 - 02:23 PM, said:

#banner ul ul {
    /*width:960px;*/

You have specified the width of the inner ul's as 960px.



lmao okay. Wow. Thank you. This is what happens when my skilled husband helps (basically does it all for me) me and then I am left to stare and figure it out and have no idea what im doing. So I changed the width from 960px to 120px. Theyre much smaller now but it doesnt solve the problem of them not being the exact width as their parent.So I can mess around with the width and change that, but I am not sure what to use to have it inherit the width.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,341
  • Joined: 12-December 12

Re: drop down menu

Posted 10 November 2015 - 02:33 PM

The HTML and CSS you have posted doesn't produce anything like that screenshot. Post some more so that your issue can be reproduced.
Was This Post Helpful? 0
  • +
  • -

#5 Sylar.   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 10-November 15

Re: drop down menu

Posted 10 November 2015 - 02:36 PM

}
/* drop-down menus on nav bar */


#banner li:hover ul {
    display: block; /* Displays the drop-down box when the menu item is hovered over */
	z-index: 99;
	font-size: 80%;
	position: absolute;
	
	
	
}
#banner ul ul {
        width:120px; 
	position: absolute; 
	display:none;
	
	
	
}
#banner li ul li {
    clear: both;
	background-color: #4A2500;
	width:120px;
	
	
	
}	
#banner li ul li a:hover	{
	background-color: #c60;

}
	
/* End Main Nav */






all i did was change the width to 120px and now it does what i showed in the image.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,341
  • Joined: 12-December 12

Re: drop down menu

Posted 10 November 2015 - 02:39 PM

If you start a new HTML page, use the HTML and CSS you have posted, it does not produce your screenshot.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1