12 Replies - 1104 Views - Last Post: 09 November 2014 - 10:27 AM

#1 Amory Blaine  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 03-November 14

Drop down menu issues

Posted 03 November 2014 - 10:52 AM

Hello guys this is my first topic (and certainly not the last) - I decided to create my own website as i do not have any budget for my small company to pay a professional; I looked for a drop down topic in the search tools but did not think anything like I am looking for.

I would like a drop down menu that actually don't change the size of the menu when it drops down and thus move down the whole page - this is my code :

<div class="nav">
      <div class="container">
    	<ul id="navigation">
		<li class=""> <a href="#">Collections</a>
        <ul>
			<li class=""> <a href="#">AW 2015</a> </li>
			<li class=""> <a href="Collection-SS-2015.html">SS 2015</a> </li>
			<li class=""> <a href="#">AW 2013</a> </li>
		</ul>
		<li class=""> <a href="#">Show</a>
		<ul>
			<li class=""> <a href="#">AW 2015</a> </li>
			<li class=""> <a href="show-ss-2015.html">SS 2015</a> </li>
			<li class=""> <a href="#">AW 2013</a> </li>
		</ul>
		<li class=""> <a href="bio_en.html">Bio</a> </li>
		<li class=""> <a href="contact_en.html">Contact</a> </li>
     </div>
</div>


and the css

#navigation {
		list-style: none;
		font-family: Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0;
		font-size: 0.8em;
}
/
#navigation li
{
		clear: both;
		height: 2em;
		position: relative;
}

#navigation li a
{
		float: right;
		display: block;
		padding: 4px;
		text-decoration: none;
		color: #666;
		text-transform: uppercase;
		margin-bottom: 5px;
		margin-right: 10px;
}

#navigation li:hover a,
#navigation li a:hover
{
		background: #FFFFFF;
		color: #666;
}

#navigation ul {display: none;}

#navigation li:hover ul {display: block;}

#navigation ul
{
		list-style: none;
		float: down;
		margin: 0;
		padding: 4px 8px;
}

#navigation ul li
{
		float: down;
		clear: none;
		margin: 0;
		padding: 4px 8px;
		width: auto;
		height: auto;
		color: #666;
}


Thats it, so I'm looking at tutorial but still cannot understand my error, when I have my mouse over the menu the children just go on the left and the and move everything to the left instead of dropping down ...

Thanks in advance, maybe do not give me the direct answer I am willing to understand it myself but I would need some guidance as I am a real newbie at the moment,

Thanks again,

A.

I'm surprised that I cannot edit my post, I just attach a picture of my problem :

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: Drop down menu issues

#2 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2517
  • View blog
  • Posts: 10,086
  • Joined: 03-December 12

Re: Drop down menu issues

Posted 04 November 2014 - 08:50 AM

Glancing at your HTML... Look at it this way, every opening tag <ul> should have a matching closing tag </ul>

And some tags <li></li> should only be inside of other tags.

This post has been edited by astonecipher: 04 November 2014 - 08:51 AM

Was This Post Helpful? 0
  • +
  • -

#3 Amory Blaine  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 03-November 14

Re: Drop down menu issues

Posted 04 November 2014 - 09:06 AM

View Postastonecipher, on 04 November 2014 - 08:50 AM, said:

Glancing at your HTML... Look at it this way, every opening tag <ul> should have a matching closing tag </ul>

And some tags <li></li> should only be inside of other tags.


Ok thanks I forgot to close the ul navigation - so il should be only for children? therefore for bio and contact it's ul class if I understand well?
Was This Post Helpful? 0
  • +
  • -

#4 Amory Blaine  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 03-November 14

Re: Drop down menu issues

Posted 04 November 2014 - 09:13 AM

Therefore something like that :

<div class="nav">
      <div class="container">
    	<ul id="navigation">
		<li class=""> <a href="#">Collections</a>
        <ul>
			<li class=""> <a href="Collection-aw-2015.html">AW 2015</a> </li>
			<li class=""> <a href="Collection-SS-2015.html">SS 2015</a> </li>
			<li class=""> <a href="Collection-aw-2013.html">AW 2013</a> </li>
		</ul>
        </li>
		<li class=""> <a href="#">Show</a>
		<ul>
            <li class=""> <a href="#">AW 2015</a> </li>
			<li class=""> <a href="show-ss-2015.html">SS 2015</a> </li>
			<li class=""> <a href="#">AW 2013</a> </li>
		</ul>
        </li>
		<li class=""> <a href="bio_en.html">Bio</a> </li>
		<li class=""> <a href="contact_en.html">Contact</a> </li>
        </ul>
     </div>
</div>



I tried to follow another post for the HTML structure to help me to solve the issue but it is not working : http://www.dreaminco...t-o-javascript/
Was This Post Helpful? 0
  • +
  • -

#5 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2517
  • View blog
  • Posts: 10,086
  • Joined: 03-December 12

Re: Drop down menu issues

Posted 04 November 2014 - 09:19 AM

Try Here
Was This Post Helpful? 0
  • +
  • -

#6 Amory Blaine  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 03-November 14

Re: Drop down menu issues

Posted 04 November 2014 - 12:20 PM

View Postastonecipher, on 04 November 2014 - 09:19 AM, said:

Try Here


I checked the link you sent me tried to organise my menu better and play around in the CSS (do I need to use the js file as well?)

<div class="nav">
      <div class="container">
    	<ul id="navigation">
		<li class="top"><a href="#" id="collections" class="top_link"><span class="down">Collections</span></a>
        <ul class="sub">
			<li><a href="Collection-aw-2015.html">AW 2015</a></li>
			<li><a href="Collection-SS-2015.html">SS 2015</a></li>
			<li><a href="Collection-aw-2013.html">AW 2013</a></li>
		</ul>
       </li>
		<li class="top"><a href="#" id="show" class="top_link"><span class="down">Show</span></a>
		<ul>
			<li><a href="#">AW 2015</a></li>
			<li><a href="show-ss-2015.html">SS 2015</a></li>
			<li><a href="#">AW 2013</a></li>
		</ul>
        </li>
		<li class="top"><a href="bio_en.html" id="bio" class="top_link"><span class="down">Bio</span></a></li>
		<li class="top"><a href="contact_en.html" id="contact" class="top_link"><span class="down">Contact</span></a></li>
       </ul>
     </div>
</div>




CSS :

#navigation {
		list-style: none;
		font-family: Arial, Helvetica, sans-serif;
		margin: 0;
		padding-top: 10px;
		font-size: 0.8em;
}

#navigation li {
		z-index: 200;
		clear: both;
		height: 2em;
		position: relative;
		font-size: 11px;
}

#navigation li a
{
		float: right;
		display: block;
		padding: 4px;
		text-decoration: none;
		color: #666;
		text-transform: uppercase;
		margin-bottom: 5px;
		margin-right: 10px;
}

#navigation li:hover a,
#navigation li a:hover
{
		background: #FFFFFF;
		color: #666;
}

#navigation ul { 
		display: none;
}


#navigation li:hover ul {
	display: block;
}

#navigation ul {
		list-style: none;
		font-size: 10px;
		float: down;
		margin: 0;
		padding: 4px 8px;
}

#navigation ul li
{
		float: none;
		clear: none;
		margin: 0;
		padding: 4px 8px;
		width: auto;
		height: auto;
		color: #666;
}



The problem comes from a display or float? It's like a left/inline thingy? as I would like it ~below and as a block but cannot sort it out.

Maybe I can remove a div class like the container or can I just keep it?
Was This Post Helpful? 0
  • +
  • -

#7 infernorthor  Icon User is offline

  • D.I.C Lover

Reputation: 362
  • View blog
  • Posts: 1,718
  • Joined: 07-February 14

Re: Drop down menu issues

Posted 04 November 2014 - 03:45 PM

getting things placed right can be tricky. I would suggest doing the important stuff first so you have less css to look over, when getting things working.

Also I wouldn't make so many classes. And extra div.

It's a little hard to explain how to do it, but I did comment the code that gets the basic layout. Play with the properties to see how it affects it. That's a good way to build an understanding. Also read rules at www.w3.org
/*make menu go to right*/
#navigation{
	float:right;
}


#navigation li{
	/*change order*/
	float:right;
	
	position:relative;
}


#navigation ul {
	/*this makes it vertical*/
	position: absolute;
	/*starts off hid*/
	display:none;
}

/*show sublist if menu hovered*/
#navigation li:hover > ul{
	display:block;
}	

#navigation ul li{
    /*the menuitems are left align*/
	float: left;
}

li,ul,a{
	margin:0; 
	padding:2;
}

li{
	border: 1px solid;
}


This post has been edited by infernorthor: 04 November 2014 - 03:47 PM

Was This Post Helpful? 0
  • +
  • -

#8 Amory Blaine  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 03-November 14

Re: Drop down menu issues

Posted 04 November 2014 - 04:23 PM

Ok so I did some update so far :

<div class="nav">
      <div class="container">
    	<ul id="navigation">
        <li class="top"><a href="products_en.html" id="products" class="top_link"><span class="down">Products</span></a></li>
		<li class="top"><a href="#" id="collections" class="top_link"><span class="down">Collections</span></a>
        <ul class="sub">
			<li><a href="Collection-aw-2015.html">AW 2015</a></li>
			<li><a href="Collection-SS-2015.html">SS 2015</a></li>
			<li><a href="Collection-aw-2013.html">AW 2013</a></li>
		</ul>
       </li>
		<li class="top"><a href="#" id="show" class="top_link"><span class="down">Show</span></a>
		<ul>
			<li><a href="#">AW 2015</a></li>
			<li><a href="show-ss-2015.html">SS 2015</a></li>
			<li><a href="#">AW 2013</a></li>
		</ul>
        </li>
		<li class="top"><a href="projects_en.html" id="projects" class="top_link"><span class="down">Projects</span></a></li>
		<li class="top"><a href="press_en.html" id="press" class="top_link"><span class="down">Press</span></a></li>                
		<li class="top"><a href="bio_en.html" id="bio" class="top_link"><span class="down">Bio</span></a></li>
		<li class="top"><a href="contact_en.html" id="contact" class="top_link"><span class="down">Contact</span></a></li>
       </ul>
     </div>
</div>



What div can I get rid of? the nav class?

My CSS so far :

.container li {
  display: inline;
}

.homevideo {
	text-align:center
}


.infocontact {
	text-align:center
}

.collection-container {
	text-align:center;	
	width:auto;
	display: inline-block;
	width:1250px;
  	margin: 0 auto;
	white-space:nowrap; 
    overflow:scroll;
}

.gate {
	text-align: center
}

body{
	width:100%;
	margin:auto;
	min-width:1200px;
	max-width:2000px;
	min-height: 700px;
	
}
.containertitle {
	padding-left: 10px
}

/* ------------- Navigation  ------------- */
#navigation {
		list-style: none;
		font-family: Arial, Helvetica, sans-serif;
		margin: 0;
		padding-top: 10px;
		font-size: 0.8em;
}
/* CSS for each Parent Item */
#navigation li {
		clear: both;
		height: 2em;
		position: relative;
		font-size: 11px;
}

#navigation li a
{
		float: right;
		display: inherit;
		padding: 4px;
		text-decoration: none;
		color: #666;
		text-transform: uppercase;
		margin-bottom: 5px;
		margin-right: 10px;
}

/* Change background color and font color of parent items when mouse hover */
#navigation li:hover a,
#navigation li a:hover
{
		background: #FFFFFF;
		color: #666;
}

/* Applie to group of Child Items Each Child Item will be invisible by default */
#navigation ul { 
		display: none;
		position: absolute;
}

/* Each Child Item will be visible if mouse hover */
#navigation li:hover ul {
	display: inherit;
	position: absolute;
	left: auto;
}

#navigation ul {
		list-style: none;
		position: absolute;
		font-size: 10px;
		margin: 0;
}

#navigation ul li
{
		float:none;
		clear: none;
		margin: 0;
		color: #666;
		display: inherit;
}

footer { 
    display: block;
	text-align:right;
	color: #666;
	font-size: 0.8em;
	padding-right: 10px;

}

#sidebar{
     position:absolute;
     left: absolute;
     top: absolute;
     bottom: absolute;
	 float:left;
	 font-family: Arial, Helvetica, sans-serif;
	 font-size:10px;
}

#sidebar li {
	list-style:none;
}

/* unvisited link */
a:link {
    color: #666;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
}

/* visited link */
a:visited {
    color: #666;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
}

/* mouse over link */
a:hover {
    color: #666;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
}

/* selected link */
a:active {
    color: #666;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
}



So now the children are on the left side of the page.

I've read that apparently we can't really solve my problem as my menu is not on an absolute position? It would be a bit annoying !

Thanks for the website I will have a deep look next week as I have a small break, I'd like to solve this issue without reading a whole book for now.

Thanks for your help guys !
Was This Post Helpful? 0
  • +
  • -

#9 Amory Blaine  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 03-November 14

Re: Drop down menu issues

Posted 08 November 2014 - 04:03 PM

I still don't really know where my answer was, so I re-did the whole thing with a tutorial I found online and it's working very well !

Now I'm looking to hide the horizontal scroll bar for my gallery pictures ! Almost there ! ~~
Was This Post Helpful? 0
  • +
  • -

#10 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2517
  • View blog
  • Posts: 10,086
  • Joined: 03-December 12

Re: Drop down menu issues

Posted 09 November 2014 - 07:47 AM

If you are just trying to hide the scrollbars, you can use the overflow: attribute of CSS.
Was This Post Helpful? 0
  • +
  • -

#11 Amory Blaine  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 03-November 14

Re: Drop down menu issues

Posted 09 November 2014 - 10:06 AM

View Postastonecipher, on 09 November 2014 - 07:47 AM, said:

If you are just trying to hide the scrollbars, you can use the overflow: attribute of CSS.


The overflow: hidden; makes it stop working ... while I want it to work horizontally but without the scrollbar visible !
Was This Post Helpful? 0
  • +
  • -

#12 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2517
  • View blog
  • Posts: 10,086
  • Joined: 03-December 12

Re: Drop down menu issues

Posted 09 November 2014 - 10:17 AM

If you want to hid the vertical parts of the div you can use overflow-y: hidden. There are three different overflow properties, overflow for the whole thing, overflow-x: for horizontal; and overflow-y: for vertical.
Was This Post Helpful? 0
  • +
  • -

#13 Amory Blaine  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 03-November 14

Re: Drop down menu issues

Posted 09 November 2014 - 10:27 AM

View Postastonecipher, on 09 November 2014 - 10:17 AM, said:

If you want to hid the vertical parts of the div you can use overflow-y: hidden. There are three different overflow properties, overflow for the whole thing, overflow-x: for horizontal; and overflow-y: for vertical.


I don't mind the vertical scroll, but in my div for the gallery I want the horizontal scroll to work in it while I can hide this horizontal scrollbar.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1