• Locked
2 replies [Last post]
Wed, 2015-12-09 21:04
guidomarchal
guidomarchal's picture
Offline
newbie
Last seen: 4 years 30 weeks ago
Timezone: GMT+1
Joined: 2015-12-09
Posts: 3
Points: 5

Hello,

I want to move my responsive menu 40px to the right. That's no problem but my dropdown menu stays where it was.
I tried a lot: position relative and all the other positions nothing seems to work. Has anyone a solution for my problem?

Kind Regards,
Guido Marchal, Gouda Netherlands.

HTML code

<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
	<ul id="menu">
		<li><a href="">Home</a></li>
		<li>
			<a href="#"></a>
			<ul class="hidden">
				<li><a href=""></a></li>
				<li><a href=""></a></li>
                                <li><a href=""></li>
			</ul>
		</li>
		<li>
			<a href="#"></a>
			<ul class="hidden">
                                <li><a href=""</a></li>
                                <li><a href=""</a></li>
				<li><a href=""</a></li>
                                <li><a href=""</a></li>
                                <li><a href=""</a></li>
				<li><a href=""</a></li>
                                <li><a href=""</a></li>
                                <li><a href=""</a></li>
                                <li><a href=""</a></li>
                                <li><a href=""</a></li>
                                <li><a href=""</a></li>
				<li><a href=""</a></li>
                                <li><a href=""</a></li>
				<li><a href=""</a></li>
			</ul>
		</li>
		<li><a href=""></a></li>
 
		<li><a href=""></a></li>
	</ul>

CSS Code

ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
 
}
 
li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}
 
/*Style for menu links*/
li a {
	display:block;
	min-width:140px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	background: #2f3036;
	text-decoration: none;
}
 
 
li:hover a {
	background: #19c589;
}
 
 
li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}
 
 
li:hover ul a:hover {
	background: #19c589;
	color: #fff;
}
 
 
li ul {
	display: none;
}
 
 
li ul li {
	display: block;
	float: none;
}
 
 
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}
 
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

Top
Tags:
Thu, 2015-12-10 08:27
#1
guidomarchal
guidomarchal's picture
Offline
newbie
Last seen: 4 years 30 weeks ago
Timezone: GMT+1
Joined: 2015-12-09
Posts: 3
Points: 5

I have tried this but now is

I have tried this but now is the menu showing up too much to the right!

Anyone can help?

/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
        margin-left: 1cm;
 
}
 
/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	float: left;
	margin-right: 1px;

Top
Thu, 2015-12-10 09:35
#2
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 42 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Validate your HTML code

Your code has alot of errors , i have made some corrections , see HERE , validate your code always.

Have you tried margin-right ? margin left ?

Top
  • Locked