Jump to content

multi dropdown/navi

ahile91

By ahile91
in HTML/XHTML

 Share

Recommended Posts

ahile91 Newbie

ahile91

Posted
Posted

hi everyone i'm trying to learn the code to build my own website. i want to make a website using 960grid system 16 colum. but i coulden't find anywhere how to make category? i want to be the navigator on top right and under to be 2 category and multiple subcategory. 

<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>title</title>
<meta name="keywords" content="bla bla">
<meta name="description" content="about bla bla">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Serif Pro">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<!-- body -->
<body>
	<div class="container_16">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif}
</style>
<!-- header -->
<header>
	<div class="grid_5 alpha brand">webname</div>
	<div class="grid_11 omega">
<!-- navigation -->
		<nav>
			<ul>
				<li><a href="#">Contact</a> |</li>
				<li><a href="#">Home</a> |</li>
				<li><a href="#">SingUp</a></li>
			</ul>
		</nav>
	</div>
</header>
<!-- footer -->
<!--footer>
	<p>&copy; 2017 All rights reserved.</p>
</footer>
</body>
</html>

for the style i use grid 960_16_col.css and i add this.

under this on the same header i want to make another container with 2 category like i said up. 

body {
  min-width: 960px;
  background-image: url(headerbackground.png);
  background-repeat:repeat-x;
}

.brand {
	font-size: 55px;
	font-weight: 600;
}

/* text color */
header {
	color: #ff1e00;
}

/* navigator position */
nav {
	text-align: right;
	margin-top: 20px;
}

/* navigator text */
nav a {
	color: #ff1e00;
	text-decoration: none;
	padding: 5px;
}

/* navigator hover */
nav a:hover {
	background: #6b7d6f;
	border-radius: 12px;
}

/* An Unordered List */
header ul {
	margin: 0;
	padding: 0;
}

/* navigator alignment */
header li {
	list-style: none;
	display: inline;
	margin-left: 5px;
	padding: 0;
	font-size: 16px;
}

 

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

That is vague also? I suspect you mean main parent menu with child sub-menus, which in turn can have child sub-menu and so on.

Its just the same as using un/ordered list which have sub-child list-items, then another sub-child list-item. You just style li elements that are hovered over to show its child ul including all its child list-items.

Link to comment
Share on other sites
  • 3 weeks later...
Johnny7oak Newbie

Johnny7oak

Posted
Posted (edited)

put them into horizontal lists. Preview Website 

<html>
<body>


<style>
  li {
    float: left;
    list-style-type:none;
}
</style>
<ul>
                                <li><a href="#">Contact</a> |</li>
                                <li><a href="#">Home</a> |</li>
                                <li><a href="#">SignUp</a></li>
                        </ul>
</body>
</html>

 

to correct yours... 


<!-- change style to include header -->

<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif}
header {float:left; list-style-type:none;}
</style>

If you want multiple lists, make multiple lists in columns.  Nobody says you can't float and use tables.

Edited by Johnny7oak
just figured it out..
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
Go to topic listing
×
×
  • Create New...