Jump to content

Fitting ul around content


DarkxPunk
 Share

Recommended Posts

Hey there,

So I am rebuilding a clients website and wanted to change something about the menu bar... Currently the sub menus are all the same width, I wanted the width to match the largest item in the sub menu, but having a weird issue.

Here is the code:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Sunburst Beta">
		<base href="">
		<title>Sunburst</title>
		<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<header>
			<div class="wrap">
				<div class="split"></div>
				<div class="split"></div>
				<div class="split"></div>
			</div>
		</header>
		<nav>
			<ul>
				<li><a href="">Home</a></li>
				<li>
					<a href="">About Us</a>
					<ul>
						<li><a href="">President's Letter</a></li>
						<li><a href="">Shipping & Payment</a></li>
						<li><a href="">Guarantee</a></li>
						<li><a href="">Privacy Policy</a></li>
						<li><a href="">Terms & Conditions</a></li>
						<li><a href="">Disclaimer</a></li>
					</ul>
				</li>
				<li>
					<a href="">Diamonds</a>
					<ul>
						<li><a href="">Colour</a></li>
						<li><a href="">Clarity</a></li>
						<li><a href="">Cut</a></li>
						<li><a href="">Carat</a></li>
						<li><a href="">Certified</a></li>
						<li><a href="">5Cs</a></li>
					</ul>
				</li>
				<li><a href="">Gold</a></li>
				<li><a href="">Why Invest</a></li>
				<li><a href="">Members Only</a></li>
				<li><a href="">Contact Us</a></li>
			</ul>
		</nav>
		<section></section>
		<footer></footer>
	</body>
</html>

CSS:

* {
	box-sizing: border-box;
	font-family: sans-serif;
}

a {
	text-decoration: none;
	color: #ffffff;
}

a:hover {
	color: #d9d09a;
}

html,body {
	background-color: #a09999;
}
header,nav,section,footer {
	margin: 0 auto;
	width: 100%;
}
header {
	height: 13vw;
	background-color: #565353;
}
header .wrap {
	margin: 0 auto;
	width: 96vw;
}
header .split {
	width: 32vw;
	height: 13vw;
	float: left;
	background-color: #292323;
}
header .split:nth-child(1),
header .split:nth-child(3) {
	background-color: #5d4d5d;
}
nav {
	background-color: #605c5c;
}
nav ul,nav ul li ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
nav ul li,nav ul li ul li {
	display: inline-block;
	position: relative;
}
nav ul li a,nav ul li ul li a {
	padding: 0.8vw 1vw 0.5vw;
	display: inline-block;
	text-transform: uppercase;
	font-size: 1.6vw;
	white-space: nowrap;
}
nav ul li:hover ul {
}
nav ul li ul {
	position: absolute;
	text-align: left;
	display: inline-block;
	top: 3.05vw;
/* 	left: 0; */
}
nav ul li ul li {
	width: 100%;
}
nav ul li ul li a {
	width: 100%;
	border: 1px solid #000000;
	border-top: 0.1vw solid #4c4c4c;
	text-transform: capitalize;
	background-color: #605c5c;
}

If you notice at the moment I am achieving what I want, except the menu is to the right of the parent. So the obvious way to fix that is set left: 0; as you will notice its commented out right now. If you set it to left: 0; the ul widens to the size of the parent! I can't figure out why this is happening or how to resolve it. Hope someone has an idea.

Thanks!

Link to comment
Share on other sites

Well that is necessary to have those elements fill the ul so the max width is the size of the largest menu item. But I can't understand why the ul is sizing to 100% of an unassociated element.

Link to comment
Share on other sites

Yes! using display: block; instead of display: inline-block; for submenu ul fixes this issue, you can then use left: 0;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Sunburst Beta">
        <base href="">
        <title>Sunburst</title>
        <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/>
        <style>
            * {
                box-sizing: border-box;
                font-family: sans-serif;
            }

            a {
                text-decoration: none;
                color: #ffffff;
            }

            a:hover {
                color: #d9d09a;
            }

            html,body {
                background-color: #a09999;
            }
            header,nav,section,footer {
                margin: 0 auto;
                width: 100%;
            }
            header {
                height: 13vw;
                background-color: #565353;
            }
            header .wrap {
                margin: 0 auto;
                width: 96vw;
            }
            header .split {
                width: 32vw;
                height: 13vw;
                float: left;
                background-color: #292323;
            }
            header .split:nth-child(1),
            header .split:nth-child(3) {
                background-color: #5d4d5d;
            }
            nav {
                background-color: #605c5c;
            }
            nav ul,nav ul li ul {
                margin: 0;
                padding: 0;
                list-style: none;
                text-align: center;
            }
            nav ul li,nav ul li ul li {
                display: inline-block;
                position: relative;
            }
            nav ul li a,nav ul li ul li a {
                padding: 0.8vw 1vw 0.5vw;
                display: inline-block;
                text-transform: uppercase;
                font-size: 1.6vw;
                white-space: nowrap;
            }
            nav ul li:hover ul {
            }
            nav ul li ul {
                position: absolute;
                text-align: left;
                display: inline-block;
                top: 3.05vw;
                left: 0;
            }
            nav ul li ul li {
                /*width: 100%;*/
                display: block;
            }
            nav ul li ul li a {
                width: 100%;
                border: 1px solid #000000;
                border-top: 0.1vw solid #4c4c4c;
                text-transform: capitalize;
                background-color: #605c5c;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="wrap">
                <div class="split"></div>
                <div class="split"></div>
                <div class="split"></div>
            </div>
        </header>
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li>
                    <a href="">About Us</a>
                    <ul>
                        <li><a href="">President's Letter</a></li>
                        <li><a href="">Shipping & Payment</a></li>
                        <li><a href="">Guarantee</a></li>
                        <li><a href="">Privacy Policy</a></li>
                        <li><a href="">Terms & Conditions</a></li>
                        <li><a href="">Disclaimer</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Diamonds</a>
                    <ul>
                        <li><a href="">Colour</a></li>
                        <li><a href="">Clarity</a></li>
                        <li><a href="">Cut</a></li>
                        <li><a href="">Carat</a></li>
                        <li><a href="">Certified</a></li>
                        <li><a href="">5Cs</a></li>
                    </ul>
                </li>
                <li><a href="">Gold</a></li>
                <li><a href="">Why Invest</a></li>
                <li><a href="">Members Only</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </nav>
        <section></section>
        <footer></footer>
    </body>
</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...