Selected sub menu returning value

Selected sub menu returning value

I'm new to jQuery and try to create a menu with some sub menus.
The selected sub menu should return a value (id, name or ..) to be used as a variable in my javascript.

My code;

  1. <html>
  2. <head>
  3. <title>Submenu Demo</title>
  4. <script type="text/javascript" src="js/jquery.min.js"></script>
  5. <script type="text/javascript" >

  7. $(document).ready(function() {
  9. $(".dropdown").hover(function(){
  10. $(".submenu").slideToggle(400); 
  11. });
  13. });
  14. </script>
  15. <style>
  16. body {
  17. background-color:#e4e8ec;
  18. font-family:arial;
  19. }

  21. div.dropdown {
  22. color: #555;
  23. margin: 3px -22px 0 0;
  24. width: 143px;
  25. position: relative;
  26. height: 17px;
  27. text-align:left;
  28. }
  29. div.submenu {
  30. background: #fff;
  31. position: absolute;
  32. top: -12px;
  33. left: -20px;
  34. z-index: 100;
  35. width: 135px;
  36. display: none;
  37. margin-left: 10px;
  38. padding: 40px 0 5px;
  39. border-radius: 6px;
  40. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  41. }

  43. .dropdown  li a {
  44.     color: #555555;
  45.     display: block;
  46.     font-family: arial;
  47.     font-weight: bold;
  48.     padding: 6px 15px;
  49. cursor: pointer;
  50. text-decoration:none;
  51. }

  53. .dropdown li a:hover {
  54.     background:#155FB0;
  55.     color: #FFFFFF;
  56.     text-decoration: none;
  57. }
  58. a.account {
  59. font-size: 11px;
  60. line-height: 16px;
  61. color: #555;
  62. position: absolute;
  63. z-index: 110;
  64. display: block;
  65. padding: 11px 0 0 20px;
  66. height: 28px;
  67. width: 121px;
  68. margin: -11px 0 0 -10px;
  69. text-decoration: none;
  70. background: url(icons/arrow.png) 116px 17px no-repeat;
  71. cursor:pointer;
  72. }
  73. .root {
  74. list-style:none;
  75. margin:0px;
  76. padding:0px;
  77. font-size: 11px;
  78. padding: 11px 0 0 0px;
  79. border-top:1px solid #dedede;
  80. }
  81. </style>
  82. </head>
  83. <body>
  84. <div style='margin:50px'>
  85. <div class="dropdown">
  86. <a class="account" >
  87. <span>Select Icon</span>
  88. </a>
  89. <div class="submenu" style="display: none; ">
  90.  <ul class="root">
  91.    <li>
  92.      <a href="#"><img src="./icons/pin.png">Pin</a>
  93.    </li>
  94.  </ul>
  95. </div>
  96. </div>
  97. </div>
  98. </body>
  99. </html>