I have a Php input system with 5 fields: Number, Link, Article, Name and Date. I'm trying to have the information brought inside 2 different drop down menu's. For example in the database I have:
1........http link.....Bloomberg Links........Bloomberg....2017-03-22
2........http link.....Forbes Links...........Forbes.......2017-03-22
So, I need the articles with the Bloomberg Name to go into the Bloomberg drop down menu and the articles with the Forbes Name to go into the Forbes drop down menu.
Currently, I have the 2 drop down menu's on the page and both Bloomberg and Forbes articles are going into both menu's because I don't know how to make them go into the proper drop down menu. The page is http://www.althedge.xyz/new.html
I'd appreciate is someone could show me the code that would make the Bloomberg articles go into the Bloomberg drop down menu and the Forbes articles go into the Forbes drop down menu. The html code and the php code are below. Thanks for the help?
<?php
// Database Settings
define('DB_HOST', 'localhost');
define('DB_PORT', '*****');
define('DB_USER', '*****');
define('DB_PASS', '*****');
define('DB_NAME', '*****');
// Connection to Database
$database = new MySQLi(DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT);
$sql = 'SELECT * '
. ' FROM crypto ORDER BY Date DESC, Number DESC';
$resultSet = $database->query($sql);
$currentDate = false;
while ($row = $resultSet->fetch_assoc())
{
if ($row['Date'] != $currentDate){
echo
$row['Date'] ;
$currentDate = $row['Date'];
}
echo
'<a rel="nofollow" rel="noreferrer"href="'.
$row["Link"].
'"style="text-decoration: none;"'.
'">'.
$row["Article"].
'</A>'.
'</sub><div style="height: 25px;"></div></li><li>';
}
$html .= '</ul></li></table>';
echo $html;
?>
<html >
<head>
<meta charset="UTF-8">
<title>hedge</title>
<style>
li {
line-height: 1.10;
}
#font-face {
font-family: MesloLGL-Regular;
src: url(/MesloLGL-Regular.ttf);
}
span *
{
font-size: 12px !important;
}
body * {
background: black;
font-family: MesloLGL-Regular !important;
font-size: 12px !important;
}
body {
background-color: #000;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #fff;
background-color: #000;
padding: 0px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #FFF;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #000;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
z-index: 999999;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 350px;
}
h3 {
text-decoration: underline;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<strong>
<div style="text-align: center;">
<div style="display: inline-block; text-align: left">
<body translate="no" >
<ul class="nav">
<li class="button-dropdown">
<a rel="nofollow" rel="noreferrer"href="javascript:void(0)" class="dropdown-toggle">
<span><u>bloomberg</u><font color="#00FF00"> new</font></span></a><ul class="dropdown-menu"><li>
<?php include 'searchnew.php';?>
<br><br>
<ul class="nav">
<li class="button-dropdown">
<a rel="nofollow" rel="noreferrer"href="javascript:void(0)" class="dropdown-toggle">
<span><u>coindesk</u><font color="#00FF00"> new</font></span></a><ul class="dropdown-menu"><li>
<?php include 'searchnew.php';?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
<script>
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
//# sourceURL=pen.js
</script>
</strong>
</head>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;`enter code here`
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me 1</span>
<div class="dropdown-content">
<ul>
<li>Hello World 1!</li>
<li>Hello World 1!</li>
<li>Hello World 1!</li>
</ul>
</div>
</div>
<div class="dropdown">
<span>Mouse over me 2</span>
<div class="dropdown-content">
<ul>
<li>Hello World 2!</li>
<li>Hello World 2!</li>
<li>Hello World 2!</li>
</ul>
</div>
</div>
</body>
</html>
Related
I am creating a social site and I want to leave three menu dots on the top right corner of each individual post a user makes. But it only works on one post. They show up on all of the posts but when I click it, the dropdown content only shows on the very first post at the top of the page.
I put it in my posts loop so I don't see why it's not working.
$str .= "<div class='status_post'>
<div class='post_profile_pic'>
<img src='$profile_pic' width='50'>
</div>
<!-- three dot menu -->
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown()'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div id='myDropdown' class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
<div class='posted_by' style='color:#ACACAC;'>
<a href='$added_by'> $username </a> $user_to $time_message
$delete_button
</div>
<div id='post_body'>
$body
<br>
$imageDiv
<br>
<br>
</div>
<div class='newsfeedPostOptions' onClick='javascript:toggle$id(event)'>
Comments($comments_check_num)
<iframe src='like.php?post_id=$id' scrolling='no'></iframe>
</div>
</div>
<div class='post_comment' id='toggleComment$id' style='display:none;'>
<iframe src='comment_frame.php?post_id=$id' id='comment_iframe' frameborder='0'></iframe>
</div>
<hr>";
.header{
width: 100%;
background-color: #0d77b6 !important;
height: 60px;
}
.showLeft{
color:#000 !important;
padding:10px;
}
.icons li {
background: none repeat scroll 0 0 #000;
height: 7px;
width: 7px;
line-height: 0;
list-style: none outside none;
margin-right: 15px;
margin-top: 3px;
vertical-align: top;
border-radius:50%;
pointer-events: none;
}
.btn-left {
left: 0.4em;
}
.btn-right {
right: 0.4em;
}
.btn-left, .btn-right {
position: absolute;
top: 0.24em;
}
.dropdownbtn {
position: absolute;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
margin-top: 6%;
margin-right: 30%;
}
.dropdownPosts {
position: absolute;
display: inline-block;
right: 0.4em;
}
.dropdownPost-content {
display: none;
position: absolute;
margin-top: 60px;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdownPost-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdownPosts a:hover {background-color: #f1f1f1}
.show {display:block;}
<script>
function changeLanguage(language) {
var element = document.getElementById("url");
element.value = language;
element.innerHTML = language;
}
function showDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropdownbtn')) {
var dropdowns = document.getElementsByClassName("dropdownPost-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
If you remove any duplicated IDs from the HTML and modify the 3-dots portion like so
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown(event)'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
You can then likey modify your showDropdown function like this:
function showDropdown(event) {
event.target.nextElementSibling.classList.toggle("show");
}
I have a navbar which is dynamic. I want to display the data on same page when user click on link. I am using $_REQUEST. Code is working fine but when I run the script it gives an error that 'undefined index val'... but when user click on a link it works fine. I want to remove that error.
<html>
<head>
<style>
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
margin-top: 150px;
font-family: 'Russo One', sans-serif;
}
h1 span {
color: #FF4649;
}
#container {
margin: 0 auto;
}
nav {
margin: 35px 0;
background-color: #FF4649;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #FF4649;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #333;
}
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li {
width:230px;
float:none;
display:list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top:-60px;
left:230px;
}
nav ul ul li {
border: 1px solid white;
}
//li > a:after { content: ' ▼'; }
//li > a:only-child:after { content: ''; }
</style>
</head>
<body>
<html>
<head>
<meta charset="UTF-8">
<title>Pure CSS DropDown Menu</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand|Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php
$con=mysqli_connect("localhost","root","","links");
if(!$con){
echo "error occured";
}
$query="SELECT * FROM cat";
$result=mysqli_query($con,$query);
?>
<div id="container">
<nav>
<ul>
<?php
while($row=mysqli_fetch_array($result)){
$fn_id=$row['id'];
$sub_query="SELECT * FROM subcat WHERE catid=".$fn_id;
$sub_result=mysqli_query($con,$sub_query);
?>
<li><?php echo $row['name'];?>
<ul>
<?php
while($sub_row=mysqli_fetch_array($sub_result)){
?>
<li> <?php echo $sub_row['anme'];?></li>
<?php
}
?>
</ul>
<?php
}
?>
</li>
</ul>
</nav>
<h1>Simple <span>CSS</span> DropDown Menu</h1>
</div>
<?php
$query='SELECT * FROM data WHERE subcat='.$_REQUEST['val'];
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_array($result)){
?>
<p><?php echo $row['Name'];?></p>
<?php
}
?>
</body>
</html>
</body>
</html>
Change
$query='SELECT * FROM data WHERE subcat='.$_REQUEST['val'];
Into
$query='SELECT * FROM data WHERE subcat='.!empty($_REQUEST['val']) ? $_REQUEST['val'] : '');
<!--
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<style>
.button1 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 12px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
outline: none;
background-color: blue;
color: lightblue;
}
.button1:hover {
background-color: lightblue;
color: blue;
}
</style>
<div class="spoiler">
<input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
<div class="inner" style="display:none;">
Hello noobies
</div>
-->
<!DOCTYPE html>
<html>
<style>
tab1 { padding-left: 2em; }
body {font-family: arial;
background-color: #00111a;
color: white;
}
.button1 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 12px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
outline: none;
background-color: #1ab2ff;
color: white;
font-weight: bold;
transition: 0.3s;
}
.button1:hover {
background-color: #66ccff;
}
.button1:active {
background-color: #0088cc;
}
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ab2ff;
}
ul.tab li {float: left;}
ul.tab li a {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.tab li a:hover {
background-color: #66ccff;
}
ul.tab li a:focus, .active {
background-color: #0088cc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
}
h3 {
opacity: 0.5;
}
p {
opacity: 0.5;
}
</style>
<body>
<tab1><h2>SuperBlaze27-Core</h2>
<ul class="tab">
<li>Overview</li>
<li>Files</li>
</ul>
<div id="Overview" class="tabcontent">
<h3>SuperBlaze27 Core</h3>
<p>
Still in development but really cool!<br>
If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)
<div class="spoiler">
<input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
<div class="inner" style="display:none;">
<h3>www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest</h3>
</div>
</p>
</div>
<div id="Files" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
</script>
</body>
</html>
With that I want the blue bar to not go all the way to the right and just stop after files. This is just a test but I wanted to see how it can work. I got some of the code from W3Schools. I just couldn't figure out how to get rid of the rest of the bar that isn't being used. THX in advance! ;)
Add display inline-block to both the ul and li.
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ab2ff;
display: inline-block;
}
ul.tab li {
float: left;
display: inline-block;
just add the last line to your code:
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ab2ff;
display: inline-block;
}
I am just learning web dev. I am using php in my menus. I am doing this so my users information is displayed when the user is logged in, within the menu itself. I do this with the Session super global array variables. For any of the two different kind of users that login, these variables store whether they are logged in and what their name is. This way the menu can react to adding them to the menu. My issue is that it seems that by simply using php drags my horizontal to the next level, or what I have seen people call "stepdown".
I have a jfiddle of the same sort of information running without php.
Without php, no step down:
https://jsfiddle.net/bx1jsnoL/
Stepdown looks like this on my side, which has php code echoing html code:
Here is my php on my side:
<!DOCTYPE html>
<div class="nav">
<ul>
<li>Home </li>
<li>Dates </li>
<li><a><i>Information </i></a>
<ul>
<li>About the conference</li>
<li>Conference Fee</li>
<li>Hotel Information</li>
<li>Conference Registration</li>
<li>Conference Program</li>
<li>Guidelines</li>
<li>Keynote Speakers</li>
<li>Call for Paper</li>
<li>Major Areas</li>
</ul>
</li>
<li>Comments </li>
<?php
session_start();
if(isset($_SESSION['loginstatus']) && $_SESSION['loginstatus']==true)
{
echo "<li><a id='orange'><i><b>Reviewer<b></i></a><ul>";
echo "<li><a id='orange'><i><b>" . $_SESSION['username'] . "<b></i></a></li>";
echo "<li><a href='logout.php'> Log out</a></li><li><a href='reviewerregister.php'>Registration</a></li>
<li><a href='submission.php'>Paper</a></li>
</ul></li>";
}
else
{
echo "
<li><a><i>Reviewers </i></a>
<ul>
<li><a href='login.php'> Log in</a></li>
<li><a href='reviewerregister.php'>Reviewer Registration</a></li>
<li><a href='submission.php'>Paper Submission</a></li>
</ul>
";
}
?>
</li>
<?php
session_start();
if(isset($_SESSION['adminstatus']) && $_SESSION['adminstatus']==true)
{
echo "<li><a id='orange'><i><b>Admin<b></i></a><ul>";
echo "<li><a id='orange'><i><b>" . $_SESSION['adminname'] . "<b></i></a></li>";
echo "<li><a href='logout.php'>Log out</a></li>
<li><a href='admindbmanagement.php'>Management</a></li>
</ul></li>";
}
else
{
echo "
<li><a><i>Admin </i></a>
<ul>
<li><a href='adminlogin.php'> Log in</a></li>
</ul>
";
}
?>
</ul>
</div>
Here is my css, it is included in the jfiddle but the editor here won't let me get away without any code:
table, th, td
{
border:1px solid #99d9f4;
color: white;
text-align: center;
}
form, table
{
text-align: center;
margin-left:auto;
margin-right:auto;
}
td
{
padding: 10px;
}
#orange
{
color:orange;
}
th
{
/* background-color:#99d9f4; nothing happens
color:white;*/
}
.enlarge:hover
{
transform:scale(2,2);
transform-origin:0 0;
}
#dates li
{
margin: 10px 0;
}
h1
{
/* text-decoration: underline;
*/ text-transform: capitalize;
text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #000000;
color: white;
}
p, h2, h3, h4, h5, h6
{
color:white;
}
* {
font-family: Georgia, serif, Arial;
}
/* this addresses all text
*/
input[type="submit"]
{
background:green;
color: white;
height: 1.01 em;
width: 1.01 em;
font-size: 110%;
}
input[type="file"]
{
color:white;
height: 1.01 em;
width: 1.01 em;
font-size: 110%;
}
input[type="reset"]
{
background:red;
color:white;
height: 1.01 em;
width: 1.01 em;
font-size: 110%;
}
body
{
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
margin: 0;
text-align: center;
}
input
{
color: black;
}
textarea
{
color: black;
}
/* line-height 0 gives some odd text */
.nav ul {
list-style: block;
background-color: black;
padding: 0;
margin: 0;
width: 100%;
display: inline-block;
font-size: 110%;
}
.nav > ul > li {
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/*submenus */
.nav li li {
font-size: .6em;
}
.nav li ul {
display: none;
position: absolute;
width: inherit;
}
ul.menu li
{
display:inline;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
.nav > ul > li > a {
padding-left: 0;
}
/* 650px screens */
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
line-height: 50px;
font-size: 1.0em;
display: inline-block;
}
It looks like that because your PHP isn't being interpreted as PHP; it's being interpreted as (broken) HTML. Running PHP code (and avoiding having it rendered as HTML) requires a server running PHP, the software.
jsFiddle doesn't run PHP code, so you can't test PHP on there. You can only test HTML, CSS, and JavaScript.
EDIT: based on your edits to the question and your comments below, the problem is that you are calling session_start() twice. The resulting error is triggering output that is breaking your layout.
Anyone can tell me what's wrong with these code...
I can't make sub menu to be shown...
I think my mistake at the part where I call sub menu from database. But I checked, there is nothing wrong..
maybe there are some mistake at css. but I don't know...
php code:
<html>
<head>
<link rel="stylesheet" href="<?php echo"css/copy.css" ?>" type="text/css" />
</head>
<?php include "koneksi.php"?>
<body>
<div id="page-wrap">
<ul class="dropdown">
<?php
/*where I select main menu from table mainmemnu*/
$main = mysql_query("SELECT * FROM mainmenu WHERE aktif='Y'");
while($r=mysql_fetch_array($main))
{
echo"<li><a href='$r[link]'><span>$r[nama_menu]</span></a>";
/*where I select sub menu from table submenu*/
$sub = mysql_query
("SELECT * FROM submenu, mainmenu WHERE submenu.id_main = mainmenu.id_main AND submenu.id_main=$r[id_main]");
$jml = mysql_num_rows($sub);
if($jml > 0)
{
echo"<div><ul>";
while($w = mysql_fetch_array($sub))
{
echo
"<li>
<a href='$w[link_sub]'>
<span>
» $w[nama_sub]
</span>
</a>
</li>";
}
echo"</ul></div></li>";
}
else
{
echo"</li>";
}
}
?>
</ul>
</div>
</body>
</html>
css code:
* {margin: 0; padding: 0;}
body {font: 14px Helvetica, San-Serif;}
#page-wrap{width: 800px; margin: 0px auto; padding-left: 419px;}
a { text-decoration: none; }
ul { list-style: none; }
p { margin: 15px 0; }
/* Level One */
ul.dropdown{position: relative;}
ul.dropdown li{font-weight: bold; float: left; zoom: 1; background: #ccc;}
ul.dropdown a:hover{color: #000;text-decoration: none;}
ul.dropdown a:active{color: #222;}
ul.dropdown li a{display: block; padding: 4px 8px; border-right: 1px solid #333; color:#222;}
ul.dropdown li:last-child a{border-right: none;}
ul.dropdown li.hover, ul.dropdown li:hover{background: #ffa500; color: black; position: relative; z-index: 9;}
ul.dropdown li.hover a{color: black;}
/* Level Two */
ul.dropdown ul{width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}
ul.dropdown ul li{font-weight: normal; background: #DCDCDC; color: #000; z-index: 9; border-bottom: 1px solid #ccc; float: none;}
ul.dropdown ul li a{border-right:none; width:100%; display: inline-block;}
the sub menu won't come out when i bring cursor on the menu...
I would like to see what the HTML generated by the code looks like, but IMO, you are using way too many divs, spans, tags that are not needed..
Check out if this jsfiddle can help you out, its made purely out of HTML & CSS.
This is the part of the CSS you might be missing.
ul.dropdown > li > ul {
display: none;
}
ul.dropdown > li:hover > ul {
display: block;
}
http://jsfiddle.net/x9D37/
You need a javascript to manipulate the block you want to see when hovering over a tag.
You cannot hover over a hidden tag.
You are missing the css that will make the child div display.
Basically it comes down to:
/*hiding initially*/
.dropdown li ul
{
position: absolute;
display: none;
}
/*display selectively*/
.dropdown li:hover > ul
{
display: block;
}